<!-- src/components/TodoStats.vue -->
<template>
    <div class="todo-stats">
      <div class="stats-cards">
        <div class="stat-card">
          <div class="stat-card-value">{{ totalCount }}</div>
          <div class="stat-card-label">当前任务总数</div>
        </div>
        <div class="stat-card active">
          <div class="stat-card-value">{{ remainingCount }}</div>
          <div class="stat-card-label">待处理任务</div>
        </div>
        <div class="stat-card completed">
          <div class="stat-card-value">{{ completedCount }}</div>
          <div class="stat-card-label">已处理任务</div>
        </div>
      </div>
      <div class="progress-container">
        <div class="progress-bar" :style="{ width: completionRate + '%' }"></div>
        <span class="progress-label">{{ completionRate }}%</span>
      </div>
      <p class="task-count">任务完成情况</p>
      <p class="last-saved" v-if="lastSavedTime">上次保存: {{ lastSavedTime }}</p>
    </div>
  </template>
  
  <script>
  export default {
    name: 'TodoStats',
    props: {
      totalCount: {
        type: Number,
        required: true
      },
      remainingCount: {
        type: Number,
        required: true
      },
      completedCount: {
        type: Number,
        required: true
      },
      completionRate: {
        type: Number,
        required: true
      },
      lastSavedTime: {
        type: String,
        default: ''
      }
    }
  }
  </script>